<template>
  <div>
    <div style="display: flex">
      <div class="photo-box" style="flex: 1">
        <div>
          <span style="font-weight: bolder">{{ form.userName }}</span
          >（{{ form.registerNoticeVo.jobNumber }}）
        </div>
        <div>进修科目：{{ form.registerDeptName }}</div>
        <div>
          进修日期：{{ form.registerNoticeVo.startDate }} -
          {{ form.registerNoticeVo.endDateDefault }}
        </div>
        <div>单位名称：{{ form.unitHospitalName }}</div>
      </div>
      <div class="photo-box" style="flex: 1">
        <div></div>
        <div>
          考勤情况：{{
            (form.registerLeaveVoList || []).length == 0
              ? "全勤"
              : "请假天数:" + form.leaveStat.leaveDays
          }}
        </div>
        <div style="display: flex; align-items: center">
          结业时间：
          <span v-if="form.registerNoticeVo">
            {{ form.registerNoticeVo.endDate }}</span
          >
          <div v-if="form.leaveStatusDesc" style="color: #a52529">
            （{{ form.leaveStatusDesc }}）
          </div>
        </div>
      </div>
    </div>
    <div class="separate-box"></div>
    <div class="progress-box">
      <div style="width: 60px">培养考核<br />记录手册</div>
      <div
        style="width: calc(100% - 230px); margin-left: 20px; margin-right: 20px"
      >
        <el-progress
          :text-inside="true"
          :stroke-width="20"
          :percentage="manualTotal"
        ></el-progress>
      </div>
      <div style="width: 130px">
        <el-button type="primary" @click="openManual">查看记录手册</el-button>
      </div>
    </div>
    <div class="info-box">
      <div>1、临床工作：完成临床工作填写，获得20%进度</div>
      <div v-if="finish4" class="success">已完成</div>
      <div v-else class="fail clickStyle" @click="openComment('2')">去完成</div>
    </div>
    <div class="info-box">
      <div>2、个人小结：完成个人小结填写，获得20%进度</div>
      <div v-if="finish3" class="success">已完成</div>
      <div v-else class="fail clickStyle" @click="openComment('4')">去完成</div>
    </div>
    <div class="info-box">
      <div>3、进修评价：完成进修评价填写，获得20%进度</div>
      <div v-if="finish5" class="success">已完成</div>
      <div v-else class="fail clickStyle" @click="openComment('5')">去完成</div>
    </div>
    <div class="info-box">
      <div>4、进修考评：完成带教出科考评与考评结论，获得20%进度</div>
      <div v-if="finish2" class="success">已完成</div>
      <div v-else class="fail clickStyle" @click="openComment('3')">去完成</div>
    </div>
    <div class="info-box">
      <div>5、进修计划：完成进修计划，当前完成{{ progress }}%进度</div>
      <div v-if="finish1" class="success">已完成</div>
      <div v-else class="fail" @click="openPlan">未完成</div>
    </div>

    <div class="separate-box"></div>
    <div class="section-box">审批流程</div>
    <el-timeline :reverse="true">
      <el-timeline-item
        v-for="(item, index) in form.auditLogVoList"
        :key="index"
        v-if="item.type == 2"
      >
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <div style="display: flex">
            <div>
              <div>管理员 ({{ item.auditNickName }}) 审批</div>
              <div>原因：{{ item.remark }}</div>
            </div>
            <!--<div v-if="item.auditLevel == 1">进修科秘书 ({{ item.auditNickName }}) 审批</div>
            <div v-if="item.auditLevel == 2">科室负责人 ({{ item.auditNickName }}) 审批</div>
            <div v-if="item.auditLevel == 3">管理员 ({{ item.auditNickName }}) 审批</div>-->
            <el-tag
              style="margin-left: 15px"
              v-if="item.auditStatus == 1"
              size="mini"
              effect="dark"
              type="success"
              >已通过</el-tag
            >
            <el-tag
              style="margin-left: 15px"
              v-if="item.auditStatus == 3"
              size="mini"
              effect="dark"
              type="danger"
              >已拒绝</el-tag
            >
          </div>
          <div>{{ parseTime(item.createTime) }}</div>
        </div>
      </el-timeline-item>
    </el-timeline>
    <div style="text-align: center; position: sticky; bottom: 0">
      <el-button
        type="primary"
        v-if="
          form.graduationAuditStatus == 0 || form.graduationAuditStatus == 4
        "
        @click="saveGraduation"
      >
        提交申请
      </el-button>
      <el-button v-else effect="dark" type="info">已提交</el-button>
    </div>
  </div>
</template>

<script>
import {
  getRegisterInfo,
  updateRegisterInfo,
} from "@/api/business/registerInfo";

export default {
  props: {
    registerId: null,
  },
  data() {
    return {
      baseURL: process.env.VUE_APP_BASE_API,
      form: {
        registerNoticeVo: {},
        registerLeaveVoList: [],
        registerManualVo: {},
        registerAllocationVoList: [],
        auditLogVoList: [],
      },

      progress: 0,
      finish1: false,
      finish2: false,
      finish3: false,
      finish4: false,
      finish5: false,
      manualTotal: 0,
    };
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    openComment(index) {
      this.$emit("openComment", index);
    },
    getInfo() {
      getRegisterInfo(this.registerId).then((response) => {
        this.form = response.data;
        let manualTotal = 0;
        // 1、进修计划：完成进修计划，获得20%进度
        this.progress = this.getTimeProgress(
          this.form.registerNoticeVo.startDate,
          this.form.registerNoticeVo.endDate
        );
        if (this.progress === 100) {
          this.finish1 = true;
          manualTotal += 20;
        }
        // 2、进修考评：完成带教出科考评与考评结论，获得20%进度
        let registerAllocationVoList = this.form.registerAllocationVoList;
        if (
          registerAllocationVoList.length > 0 &&
          registerAllocationVoList.filter((e) => {
            return e.scoreStatus === 2;
          }).length === registerAllocationVoList.length &&
          this.form.scoreLevel
        ) {
          this.finish2 = true;
          manualTotal += 20;
        }
        let registerManualVo = this.form.registerManualVo;
        if (registerManualVo) {
          // 3、个人小结：完成个人小结填写，获得20%进度
          if (registerManualVo.personalSummary) {
            this.finish3 = true;
            manualTotal += 20;
          }
          // 4、临床工作：完成个人小结填写，获得20%进度
          if (
            registerManualVo.clinicNumber ||
            registerManualVo.emergencyNumber ||
            registerManualVo.averageNumber ||
            registerManualVo.clinicEmergencyContent ||
            registerManualVo.manageBeds ||
            registerManualVo.caseNumber ||
            registerManualVo.wardContent ||
            registerManualVo.businessContent ||
            registerManualVo.otherContent
          ) {
            this.finish4 = true;
            manualTotal += 20;
          }
          // 5、进修评价：完成进修评价填写，获得20%进度
          if (
            registerManualVo.introduceFlag &&
            registerManualVo.planFlag &&
            registerManualVo.environmentFlag &&
            registerManualVo.teacherFlag &&
            registerManualVo.businessFlag &&
            registerManualVo.timecardFlag &&
            registerManualVo.examineFlag &&
            registerManualVo.strengthContent &&
            registerManualVo.improveContent
          ) {
            this.finish5 = true;
            manualTotal += 20;
          }
        }
        this.manualTotal = manualTotal;
      });
    },
    openPlan() {
      this.$message.error("进修时间结束后，进修计划会自动完成");
    },
    // 提交申请
    saveGraduation() {
      let that = this;
      if (!this.finish1) {
        this.$message.error("进修计划未完成");
        return;
      }
      if (!that.finish2) {
        that.$message.error("进修考评未完成");
        return;
      }
      if (!that.finish3) {
        that.$message.error("个人小结未完成");
        return;
      }
      if (!that.finish5) {
        that.$message.error("进修评价未完成");
        return;
      }
      that
        .$confirm(
          "请务必确认考核手册内容不再修改后，提交结业申请，否则无法撤回！",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
        .then(() => {
          let params = {
            id: that.form.id,
            graduationAuditStatus: 1,
          };
          updateRegisterInfo(params).then((response) => {
            that.$emit("close");
            that.$modal.msgSuccess("提交成功");
          });
        })
        .catch(() => {});
    },
    getTimeProgress(startDateStr, endDateStr) {
      const startDate = new Date(startDateStr.replace(/-/g, "/"));
      const endDate = new Date(endDateStr.replace(/-/g, "/"));
      const now = new Date();
      if (now < startDate) {
        return 0;
      }
      if (now.getTime() >= endDate.getTime() - 12096e5) {
        return 100;
      }
      const totalDuration = endDate.getTime() - startDate.getTime();
      const elapsedDuration = now.getTime() - startDate.getTime();
      const progressPercentage = (elapsedDuration / totalDuration) * 100;
      return progressPercentage.toFixed(2);
    },
    openManual() {
      this.$emit("openManual");
    },
  },
};
</script>
<style lang="scss" scoped>
.photo-box {
  line-height: 30px;
}

.separate-box {
  margin: 10px 0;
  border-bottom: 2px dashed #f2f3f5;
}

.progress-box {
  display: flex;
  align-items: center;
}

.info-box {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;

  .success {
    color: #67c23a;
  }
}

.section-box {
  font-size: 16px;
  font-weight: bolder;
  margin-bottom: 10px;
}
.clickStyle {
  cursor: pointer;
  text-decoration: underline;
  color: #5055ef;
}
</style>
